<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>菜谱</title>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/bootstrap/easyui.css>
<link rel="stylesheet" 
	href=${pageContext.servletContext.contextPath}/js/bootstrap.min.css>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/icon.css>
<link rel="stylesheet" type="text/css"
	href=${pageContext.servletContext.contextPath}/themes/color.css>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/bootstrap.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/jquery.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/jquery.easyui.min.js></script>
<script type="text/javascript"
	src=${pageContext.servletContext.contextPath}/js/easyui-lang-zh_CN.js></script>
</head>
<script type="text/javascript">
	$(function(){
		var id = 0;
		//增加时的弹窗
		$('#add').window({    
		    width:600,    
		    height:400,    
		    modal:true,
		    title:"增加记录",
		}); 
		$('#add').window('close');
		//修改时的弹窗
		$('#update').window({    
		    width:600,    
		    height:400,    
		    modal:true,
		    title:"修改记录",
		}); 
		$('#update').window('close');
		
		
		//配置add表单
		$('#fadd').form({    
		    url:"${pageContext.servletContext.contextPath}/addfood",    
		    queryParams:{
		    	fname:"fname",
		    	ftype:"ftype",
		    	fspecialty:"fspecialty",
		    	furl:"furl",
		    	fnew:"fnew",
		    	fprice:"fprice",
		    	fmaterial:"fmaterial",
		    	fhasma:"fhasma"
		    	},  
		    	success: function(data){    
		            var da = data.flag;     
		            if (da==true){    
		            	$('#dg').datagrid('reload'); 
		            }    
		        } 
		    	
		}); 		
		
		//add窗口确定时，关闭弹窗
		$("#addqd").click(function(){
			$('#add').window('close');
			$.messager.show({
				title:'我的消息',
				msg:'新增成功.',
				timeout:2000,
				showType:'slide'
			});
			
		})
		//数据表格
		$('#dg').datagrid({    
		    url:'${pageContext.servletContext.contextPath}/loadfood', 
		    pagination:true,
		    striped:true,
		    loadMsg:'正在加载',
		    rownumbers:true,
		    pageSize:5,
			pageList:[5,10,15,20],
		    columns:[[    
		        {field:'ck',checkbox:true,width:100},    
		        {field:'fid',title:'菜品id',width:100,hidden:true},    
		        {field:'fname',title:'菜名',width:100,align:'right'}, 
		        {field:'ftype',title:'类型',width:100,align:'right'},    
		        {field:'fspecialty',title:'是否为特色菜',width:100,align:'right'},    
		        {field:'furl',title:'菜品图片路径',width:100,align:'right'},    
		        {field:'fnew',title:'是否为新增菜品',width:100,align:'right'},    
		        {field:'fprice',title:'菜品价格',width:100,align:'right'},    
		        {field:'fmaterial',title:'主料信息',width:100,align:'right'},    
		        {field:'fhasma',title:'是否缺少材料',width:100,align:'right'},    
		    ]],    
		   
		    toolbar: [{
				iconCls: 'icon-add',
				text:'增加',
				width:200,
				handler: function(){
					$('#add').window('open');
					$('#fadd').form('clear');
				}
			},'-',{
				iconCls: 'icon-remove',
				text:'删除',
				width:200,
				handler: function(){
					var sdata = $('#dg').datagrid('getSelections');
							if(sdata.length!=0){
								$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
									    if (r){    
									        $.ajax({
									        	url:'${pageContext.servletContext.contextPath}/delfood',
									        	type:'post',
									        	data:{'data':JSON.stringify(sdata)},
									        	dataType:"json",
									        	success: function(data){    
										            var da = data.flag;
										            if (da==true){    
										            	$('#dg').datagrid('reload');    
										            }    
										        } 
									        });
									   	 }
								});
							}else{
								$.messager.show({
									title:'我的消息',
									msg:'请选择需要删除的记录！！！',
									timeout:2000,
									showType:'slide'
								})
							}
						}
			},'-',{
				iconCls: 'icon-edit',
				text:'修改',
				width:200,
				handler: function(){	
					var num = $('#dg').datagrid('getSelections');
					if(num.length!=1){
						$.messager.show({
							title:'我的消息',
							msg:'请选择一条记录进行修改！！！',
							timeout:2000,
							showType:'slide'
						});
						
					}else{
						$.each(num,function(i,n){
							id = n.fid;
						})
						$('#update').window('open');
					}
				}
			}]
		});
		//确认时修改
		$("#updateqd").click(function(){
			var name = $("#c1").val();
			var type = $("#c2").val();
			var specialty = $("#c3").val();
			var url = $("#c4").val();
			var ffnew = $("#c5").val();
			var price = $("#c6").val();
			var material = $("#c7").val();
			var hasma = $("#c8").val();
			$.ajax({
	        	url:'${pageContext.servletContext.contextPath}/updatefood',
	        	type:'post',
	        	data:{
	        		"fname":name,
        		   	"ftype":type,
        		   	"fspecialty":specialty,
        	    	"furl":url,
        	    	"fnew":ffnew,
        	    	"fprice":price,
        		   	"fmaterial":material,
        	    	"fhasma":hasma,
        		  	"fid":id,
	        	},
	        	dataType:"json",
	        	success: function(data){    
		            var da = data.flag;
		            if (da==true){ 		            	
		            		$('#dg').datagrid('reload');
		            }    
		        } 
	        });
        	alert("确认修改?",function(){
        		$('#update').window('close');
        	});
		});
				
	});
</script>
<body>
	<!-- 数据表格 -->
	<table id="dg"></table>
	<!-- 增加的窗口 -->
	<div id="add" align="center">
		<form id="fadd" method="post">
			<table>
			<tr>
				<td align="right">菜名：</td>
				<td align="left"><input class="easyui-textbox" name="fname"/> </td>
			</tr>
			<tr>
				<td align="right">类型：</td>
				<td align="left">
					<select id="cc" class="easyui-combobox" name="ftype" style="width:150px;">   
					    <option value="川菜">川菜</option>   
					    <option value="湘菜">湘菜</option>   
					    <option value="热菜">热菜</option>   
					    <option value="凉菜">凉菜</option>   
					    <option value="汤">汤</option>   
					</select> 
				</td>
			</tr>
			<tr>
				<td align="right">是否为特色菜：</td>
				<td align="left"><input type="checkbox" name="fspecialty"/></td>
			</tr>
			<tr>
				<td align="right">菜品图片路径：</td>
				<td align="left"><input class="easyui-textbox" name="furl"/></td>
			</tr>
			<tr>
				<td align="right">是否为新增菜品：</td>
				<td align="left"><input type="checkbox" name="fnew"/></td>
			</tr>
			<tr>
				<td align="right">菜品价格：</td>
				<td align="left"><input class="easyui-textbox" name="fprice"/></td>
			</tr>
			<tr>
				<td align="right">主料信息：</td>
				<td align="left"><input class="easyui-textbox" name="fmaterial"/></td>
			</tr>
			<tr>
				<td align="right">是否缺少材料：</td>
				<td align="left"><input type="checkbox" name="fhasma"/></td>
			</tr>
			</table>
			<br>
			<button id="addqd" class="easyui-linkbutton">确定</button>
			
		</form> 
	</div>  
	<!-- 修改的窗口 -->
	<div id="update" align="center">
		<form id="fupdate" method="post">
			菜名：<input id="c1" class="easyui-textbox" name="fname"/> 
			<br>
			类型：<select id="c2" class="easyui-combobox" name="ftype" style="width:150px;">   
				    <option value="川菜">川菜</option>   
				    <option value="湘菜">湘菜</option>   
				    <option value="热菜">热菜</option>   
				    <option value="凉菜">凉菜</option>   
				    <option value="汤">汤</option>   
				</select> 
			<br> 
			是否为特色菜：<input id="c3" type="checkbox" name="fspecialty"/>
			<br>
			菜品图片路径：<input id="c4" class="easyui-textbox" name="furl"/>
			<br>
			是否为新增菜品：<input id="c5" type="checkbox" name="fnew"/>
			<br>
			菜品价格：<input id="c6" class="easyui-textbox" name="fprice"/>
			<br>
			主料信息：<input id="c7" class="easyui-textbox" name="fmaterial"/>
			<br>
			是否缺少材料：<input id="c8" type="checkbox" name="fhasma"/>
			<br>
			<button id="updateqd" class="easyui-linkbutton">确定</button>
		</form> 
	</div>  
	
</body>
</html>